{% extends 'base/base.html' %}
{% block title %}
<title>agem我的收藏</title>
{% endblock %}


{% block body %}
<div class="body_content_wrapper pb-2">
    <div class="container xcontainer">
        <section class="bg-dark rounded-3 g-0 p-3 text-white">
            <div id="user_profile_wrapper">
                <div class="video_list_box mb-3">
                    <div class="video_list_box--hd">
                            <h6 class="title"><script>document.writeln(AGE.hello());</script>
                                {{ user.username }}</h6>
                    </div>
                    <div class="video_list_box--bd">
                        <div class="row">
                            <div class="profile_list col-2">
                                <div class="list-group list-group-flush">
                                    <a class="list-group-item d-flex justify-content-between align-items-center  " href='{% url "user:center" %}'>个人中心 <i class="bi-house-door"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center active " href='{% url "operate:collect" %}'>我的收藏<i class="bi bi-heart"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center  " href='{% url "history:anime_history" %}'>历史记录<i class="bi bi-clock-history"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center " href='{% url "user:updatepassword" %}'>修改密码<i class="bi bi-lock"></i></a>

                                    <a class="list-group-item d-flex justify-content-between align-items-center" href='{% url "user:logout" %}' >退出登录 <i class="bi bi-box-arrow-right"></i></a>
                                </div>
                            </div>
                            <div class="col-10">
                                <div class="video_list_box collect_list">
                                <div class="video_list_box--bd">
                                    <div class="row row-cols-6 g-1">
                                    {% for c in cs %}
                                        <div class="col g-2 position-relative">
                                           <div class="video_item">
                                            <div class="video_item--image position-relative">
                                                <img referrerpolicy="no-referrer" src="https://cdn.aqdstatic.com:966/age/{{ c.anime.imglink }}" data-original="https://cdn.aqdstatic.com:966/age/{{ c.anime.imglink }}" class="lazyload d-block w-100" style="display: block;">
                                                <span class="video_item--info rounded-1 text-truncate">第{{ c.anime.episode }}集</span>
                                                <div class="video-mask"></div>
                                                <i class="video-player-icon"></i>
                                                <button type="button" class="btn btn-sm btn-danger video-item-cancel-fav" data-anime-id="{{ c.anime.id }}" node-data-id="20240021" node-data-status="1">取消收藏</button>
                                            </div>
                                            <div class="video_item-title text-truncate text-center py-2">
                                                <a href='{% url "main:detail" c.anime.id %}' class="link-light text-decoration-none stretched-link">{{ c.anime.title }}</a>
                                            </div>
                                        </div>
                                        </div>
                                    {% endfor %}
                                    {% csrf_token %}
                                    </div>
                                    <p class="collect_list_tips">收藏仅显示最近100条</p>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>
{% endblock %}
{% block js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.video-item-cancel-fav');

    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const animeId = this.getAttribute('data-anime-id');  // 获取 anime_id

            fetch('{% url "operate:change_collect" %}', {  // 替换为实际 URL
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                },
                body: JSON.stringify({ "anime_id": animeId }) 
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    const itemDiv = this.closest('.col');  // 找到属性为 col 的父元素
                    if (itemDiv) {
                        itemDiv.remove();  // 删除该元素
                    }
                } else {
                    alert(data.msg);  // 提示错误信息
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    });
});
</script>
{% endblock %}